<template>
  <div>
    <hr>
    <Test />
    <Abc />
    <hr>
    <div
      class="box"
      @dragenter.stop.prevent="enterEvent"
      @dragover.stop.prevent="overEvent"
      @drop.stop.prevent="handleDrop"
    />
  </div>
</template>
<script>
export default {
  methods: {
    enterEvent() {
      console.log('enter')
    },
    overEvent() {
      console.log('over')
    },
    handleDrop(e) {
      console.log('松开鼠标且在相应区域')
    }
  }
}
</script>
<style lang="scss" scoped>
.box {
  width: 300px;
  height: 300px;
  border: 5px dashed #ccc;
}
</style>
